import React, { useState } from 'react';
import styled, { css, keyframes } from 'styled-components';

// 定义 keyframes
const slideUp = keyframes`
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
`;

const slideUpNew = keyframes`
    70% {
        transform: translateY(20px) rotateX(-30.8deg);
    }
    80% {
        transform: translateY(-10px);
    }
    90% {
        transform: translateY(0);
    }
`;

// 定义样式组件
const NumberContainer = styled.div`
  width: 500px;
  height: 50px;
  overflow: hidden;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
  font-size: 24px;
`;

const NumberElement = styled.div<{ $isOld?: boolean; $isNew?: boolean }>`
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
  ${({ $isOld }) => $isOld && css`animation: ${slideUp} 0.3s ease-in-out forwards;`}
  ${({ $isNew }) => $isNew && css` ntransform: translateY(100%);animation: ${slideUpNew} 0.3s ease-in-out forwards;`}
`;

const ChangeButton = styled.button`
  margin-top: 10px;
`;

const AnimationSlide = () => {
  const [number, setNumber] = useState(0);
  const [isChanging, setIsChanging] = useState(false);

  const handleChangeNumber = () => {
    setIsChanging(true);
    setTimeout(() => {
      setNumber((prevNumber) => prevNumber + 1);
      setIsChanging(false);
    }, 300);
  };

  return (
    <>
      <div className='flex  items-center'>
        <NumberContainer>
          {isChanging && <NumberElement $isOld>{number}</NumberElement>}
          <NumberElement $isNew={isChanging}>{isChanging ? number + 1 : number}</NumberElement>
        </NumberContainer>
        <ChangeButton onClick={handleChangeNumber}>改变数字</ChangeButton>
      </div>
    </>
  );
};

export default AnimationSlide;
